<template>
    <div class="container">
        <!-- 内容 scrollable-->
        <div style="position: relative;">
            <van-notice-bar v-if="bigListRow.gdpName.length > 18" :speed="30" scrollable :text="bigListRow.gdpName"
                color="#ffffff" background="linear-gradient(180deg, rgba(1, 5, 21, 0.40) 0%, rgba(1, 5, 21, 0.60) 97.76%)"
                style="font-size: 16px;height: 50px;margin: 0px 20px;" />
            <div v-else class="titleHead" style="font-size: 16px;height: 50px;line-height: 50px;">
                {{ bigListRow.gdpName }}
            </div>
            <div @click="goBack"
                style="position: absolute;left: 10px;line-height: 50px;top: 0px;z-index: 99999;font-size: 14px;color: #ffffff;">
                <van-icon name="arrow-left" />
            </div>
        </div>
        <div style="overflow-y: auto;height: calc(100vh - 50px);">
            <van-steps direction="vertical" v-model:active="active" class="stepsContent" :key="key">
                <van-step v-for="(item, index) in dataList" :key="index"
                    :class="[active >= index ? 'stepsItem2' : 'stepsItem']">
                    <template #active-icon>
                        <div class="flexLR">
                            <div class="titleBz" style="color:#0089FF">{{
                                item.defend }}</div>
                            <div style="margin-left: 6px">
                                <svg width="17" height="17" viewBox="0 0 17 17" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M8.5 2.1582C9.35664 2.1582 10.1871 2.32571 10.9682 2.65608C11.7232 2.9755 12.4015 3.43287 12.9842 4.01559C13.567 4.5983 14.0245 5.27664 14.3438 6.03168C14.6743 6.81295 14.8418 7.64336 14.8418 8.5C14.8418 9.35664 14.6743 10.1871 14.3439 10.9682C14.0245 11.7232 13.5671 12.4015 12.9844 12.9842C12.4017 13.567 11.7234 14.0245 10.9683 14.3438C10.1871 14.6743 9.35664 14.8418 8.5 14.8418C7.64336 14.8418 6.81295 14.6743 6.03185 14.3439C5.27681 14.0245 4.59847 13.5671 4.01575 12.9844C3.43304 12.4017 2.9755 11.7234 2.65625 10.9683C2.32571 10.1871 2.1582 9.35664 2.1582 8.5C2.1582 7.64336 2.32571 6.81295 2.65608 6.03185C2.9755 5.27681 3.43287 4.59847 4.01559 4.01575C4.5983 3.43304 5.27664 2.9755 6.03168 2.65625C6.81295 2.32571 7.64336 2.1582 8.5 2.1582ZM8.5 1.0957C4.4107 1.0957 1.0957 4.4107 1.0957 8.5C1.0957 12.5893 4.4107 15.9043 8.5 15.9043C12.5893 15.9043 15.9043 12.5893 15.9043 8.5C15.9043 4.4107 12.5893 1.0957 8.5 1.0957Z"
                                        fill="#0089FF" />
                                    <path
                                        d="M4.36621 8.5C4.36621 9.59635 4.80173 10.6478 5.57697 11.423C6.35221 12.1983 7.40365 12.6338 8.5 12.6338C9.59635 12.6338 10.6478 12.1983 11.423 11.423C12.1983 10.6478 12.6338 9.59635 12.6338 8.5C12.6338 7.40365 12.1983 6.35221 11.423 5.57697C10.6478 4.80173 9.59635 4.36621 8.5 4.36621C7.40365 4.36621 6.35221 4.80173 5.57697 5.57697C4.80173 6.35221 4.36621 7.40365 4.36621 8.5Z"
                                        fill="#0089FF" />
                                </svg>
                            </div>
                        </div>
                    </template>
                    <template #finish-icon>
                        <div class="flexLR">
                            <div class="titleBz" style="color:#0089FF">{{
                                item.defend }}</div>
                            <div style="margin-left: 6px">
                                <svg width="17" height="17" viewBox="0 0 17 17" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M8.5 2.1582C9.35664 2.1582 10.1871 2.32571 10.9682 2.65608C11.7232 2.9755 12.4015 3.43287 12.9842 4.01559C13.567 4.5983 14.0245 5.27664 14.3438 6.03168C14.6743 6.81295 14.8418 7.64336 14.8418 8.5C14.8418 9.35664 14.6743 10.1871 14.3439 10.9682C14.0245 11.7232 13.5671 12.4015 12.9844 12.9842C12.4017 13.567 11.7234 14.0245 10.9683 14.3438C10.1871 14.6743 9.35664 14.8418 8.5 14.8418C7.64336 14.8418 6.81295 14.6743 6.03185 14.3439C5.27681 14.0245 4.59847 13.5671 4.01575 12.9844C3.43304 12.4017 2.9755 11.7234 2.65625 10.9683C2.32571 10.1871 2.1582 9.35664 2.1582 8.5C2.1582 7.64336 2.32571 6.81295 2.65608 6.03185C2.9755 5.27681 3.43287 4.59847 4.01559 4.01575C4.5983 3.43304 5.27664 2.9755 6.03168 2.65625C6.81295 2.32571 7.64336 2.1582 8.5 2.1582ZM8.5 1.0957C4.4107 1.0957 1.0957 4.4107 1.0957 8.5C1.0957 12.5893 4.4107 15.9043 8.5 15.9043C12.5893 15.9043 15.9043 12.5893 15.9043 8.5C15.9043 4.4107 12.5893 1.0957 8.5 1.0957Z"
                                        fill="#0089FF" />
                                    <path
                                        d="M4.36621 8.5C4.36621 9.59635 4.80173 10.6478 5.57697 11.423C6.35221 12.1983 7.40365 12.6338 8.5 12.6338C9.59635 12.6338 10.6478 12.1983 11.423 11.423C12.1983 10.6478 12.6338 9.59635 12.6338 8.5C12.6338 7.40365 12.1983 6.35221 11.423 5.57697C10.6478 4.80173 9.59635 4.36621 8.5 4.36621C7.40365 4.36621 6.35221 4.80173 5.57697 5.57697C4.80173 6.35221 4.36621 7.40365 4.36621 8.5Z"
                                        fill="#0089FF" />
                                </svg>
                            </div>
                        </div>
                    </template>
                    <template #inactive-icon>
                        <div class="flexLR">
                            <div class="titleBz" style="color: #ffffff">{{
                                item.defend }}</div>
                            <div style="margin-left: 6px">
                                <svg width="17" height="17" viewBox="0 0 17 17" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M8.50003 15.7014C7.5541 15.7026 6.61727 15.5168 5.74335 15.1548L5.74096 15.1538C5.62794 15.1041 5.5389 15.012 5.49292 14.8974C5.44693 14.7828 5.44767 14.6547 5.49498 14.5407C5.54229 14.4266 5.6324 14.3356 5.746 14.2872C5.85959 14.2387 5.98764 14.2367 6.1027 14.2816L6.10502 14.2825C6.85744 14.5942 7.66693 14.757 8.50003 14.757C11.9556 14.757 14.757 11.9556 14.757 8.50002C14.757 5.04445 11.9556 2.24308 8.50003 2.24308C5.04446 2.24308 2.24308 5.04445 2.24308 8.50002C2.24191 9.32177 2.40315 10.1358 2.71754 10.8951L2.71848 10.8973C2.76333 11.0124 2.76131 11.1405 2.71288 11.2541C2.66446 11.3677 2.57346 11.4578 2.45939 11.5051C2.34532 11.5524 2.21726 11.5531 2.10265 11.5071C1.98804 11.4611 1.896 11.3721 1.84626 11.2591L1.84525 11.2568C1.48583 10.3903 1.29864 9.45759 1.29864 8.50002C1.29864 4.52269 4.5227 1.29863 8.50003 1.29863C12.4774 1.29863 15.7014 4.52269 15.7014 8.50002C15.7014 12.4773 12.4774 15.7014 8.50003 15.7014Z"
                                        fill="white" />
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M7.93445 5.69056C8.02301 5.602 8.14312 5.55225 8.26837 5.55225C8.39361 5.55225 8.51372 5.602 8.60228 5.69056C8.69084 5.77912 8.74059 5.89923 8.74059 6.02447V8.66228L10.7287 10.6504C10.8147 10.7394 10.8623 10.8587 10.8612 10.9826C10.8601 11.1064 10.8105 11.2248 10.7229 11.3124C10.6354 11.3999 10.5169 11.4496 10.3931 11.4507C10.2693 11.4517 10.15 11.4041 10.061 11.3181L10.0595 11.3167L7.9345 9.19169C7.84595 9.10315 7.79617 8.98305 7.79614 8.85783V6.02447C7.79614 5.89923 7.8459 5.77912 7.93445 5.69056Z"
                                        fill="white" />
                                </svg>
                            </div>
                        </div>
                    </template>
                    <div class="stepsItemContentDiv">
                        <template v-if="item.remark.length > 0">
                            <div v-for="(item, index) in item.remark" :key="index">
                                <p>处理人：{{ item.user.userName }}<span>{{ item.createTime }}</span></p>
                            </div>
                        </template>
                        <template v-else>
                            <p>状态：未处理</p>
                        </template>
                        <div style="display: flex;justify-content: space-between;">
                            <div></div>
                            <van-button v-if="item.status == 1" type="primary" class="btn"
                                @click="LookItemFile(item)">查看</van-button>
                            <van-button v-else type="primary" class="btn"
                                :disabled="item.status == 2 && bigListRow.isHandle ? false : true"
                                @click="onEditchange(item)">处理</van-button>
                        </div>
                    </div>
                </van-step>
            </van-steps>
        </div>

        <!-- 查看文件 -->
        <van-popup v-model:show="fileListshow" position="bottom" :style="{ height: '50%' }">
            <van-picker show-toolbar title="查看附件"
                :columns="filesList.map(item => { return { text: item.name, value: item.url } })"
                @cancel="() => { fileListshow = false }" @confirm="LookItemPic" />
        </van-popup>

        <!-- 处理 -->
        <van-popup class="handlePopup" v-model:show="handleShow" closeable :close-on-click-overlay="false"
            :style="{ width: '90%' }">
            <p style="font-size: 18px;margin:12px 15px">{{ rowInfo.defend }}</p>
            <van-field v-model="onEditRemark" type="textarea" label="备注" maxlength="500" show-word-limit rows="4" autosize
                placeholder="请输入内容" label-align="top" style="background: transparent;" />
            <p style="font-size: 13.43px;margin:12px 15px;color: #ffffff;"><span style="color: red;">*</span>上传资料</p>
            <van-uploader v-model="defaultFileList" accept="*" multiple style="margin: 0 20px;" @delete="handleRemove"
                :after-read="handleChange">
                <van-button
                    style="height: 2.1rem;width: 2.1rem;background: transparent;color: #ffffff;border-style:dashed;">
                    <img src="../../../assets/images/workbench/upload.png" alt="" style="width: 100%;height: 100%;">
                </van-button>
                <template #preview-cover="{ file }">
                    <div style="width: 100%;height: 100%;" @click="LookItemPic2(file)"></div>
                </template>
            </van-uploader>

            <div class="flexLR" style="margin: 20px 10px;">
                <van-button v-if="rowInfo.defend == '方案实施监督' || rowInfo.defend == '过程验收'" type="primary" class="saveBtn2"
                    @click="onRejectFlow">驳回</van-button>
                <van-button @click="onEditSubmit(0)" type="primary" class="saveBtn">更新资料</van-button>
                <van-button @click="onEditSubmit(1)" v-if="rowInfo.defend != '施工结束'" type="primary"
                    class="saveBtn">确认通过，完结本流程</van-button>
                <van-button @click="onEditSubmit(1)" v-if="rowInfo.defend == '施工结束'" type="primary"
                    class="saveBtn">施工结束，闭合流程</van-button>
            </div>

        </van-popup>

        <!-- 驳回 -->
        <van-popup v-model:show="flowCheckShow" position="bottom" :style="{ height: '50%' }">
            <van-picker show-toolbar title="选择驳回至流程"
                :columns="flowOptions.map(item => { return { text: item.label, value: item.value } })"
                @cancel="() => { flowCheckShow = false }" @confirm="flowSubmit" />
        </van-popup>

        <!-- 预览 -->
        <LookIframe ref="iframebaseRef" classType="ModelEarlyWarning" title="预览"></LookIframe>

        <!-- 底部导航 -->
        <!-- <tab-bar></tab-bar> -->
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted, nextTick, toRaw } from "vue";
import { useRoute } from "vue-router";
import { GetGreatDangerProjectFlowLink, HandleGreatDangerProject, GetGreatDangerProjectList } from "@/api";
import { CreatedFormData } from "@/utils/CreatedFormData";
import { useAppStore } from "@/store";
import { showNotify, showSuccessToast, showFailToast } from 'vant';
import LookIframe from "@/components/LookIframe/index.vue";
export default defineComponent({
    components: { LookIframe },
    setup() {
        const appStore = useAppStore();
        const route = useRoute();

        const active = ref(0);

        const dataList = ref([
            { type: 1, remark: [], remarkids: [], updateTime: '', status: 0, defend: "方案编制" },
            { type: 2, remark: [], remarkids: [], updateTime: '', status: 0, defend: "方案内部评审" },
            { type: 3, remark: [], remarkids: [], updateTime: '', status: 0, defend: "方案专家评审" },
            { type: 4, remark: [], remarkids: [], updateTime: '', status: 0, defend: "方案交底" },
            { type: 5, remark: [], remarkids: [], updateTime: '', status: 0, defend: "方案交底接收" },
            { type: 6, remark: [], remarkids: [], updateTime: '', status: 0, defend: "技术交底" },
            { type: 7, remark: [], remarkids: [], updateTime: '', status: 0, defend: "技术交底接收" },
            { type: 8, remark: [], remarkids: [], updateTime: '', status: 0, defend: "方案执行" },
            { type: 9, remark: [], remarkids: [], updateTime: '', status: 0, defend: "方案实施监督" },
            { type: 10, remark: [], remarkids: [], updateTime: '', status: 0, defend: "过程验收" },
            { type: 11, remark: [], remarkids: [], updateTime: '', status: 0, defend: "施工结束" },
        ])

        const bigListRow = ref({ gdpName: '' })
        const flowList = ref([])
        const GetGreatDangerProjectFlowLinkData = async (id) => {
            let params = {
                id
            }
            let res = await GetGreatDangerProjectFlowLink(CreatedFormData(params));
            if (res.code == 0) {
                flowList.value = res.data;
                res.data.forEach(e => {
                    dataList.value.forEach(e2 => {
                        if (e.step == e2.type) {
                            e2.remark = e.resultList.length > 0 ? e.resultList : []
                            e2.flowid = e.id
                            if (e.step == bigListRow.value.flowStep) {
                                e2.status = 2
                            } else if (bigListRow.value.flowStep > e.step) {
                                e2.status = 1
                            } else {
                                if (bigListRow.value.flowStep == 0) {
                                    e2.status = 1
                                } else {
                                    e2.status = 0
                                }
                            }
                        }
                    })
                });
            }
        }

        const fileListshow = ref(false)

        const filesList = ref([])
        const LookItemFile = (row) => {
            // rowInfo.value = row
            fileListshow.value = true
            nextTick(() => {
                flowList.value.forEach(e => {
                    if (e.step == row.type) {
                        if (e.fNames && e.fPaths) {
                            let fNames = e.fNames.split(',')
                            let fPaths = e.fPaths.split(',')
                            filesList.value = fNames.map((e, i) => {
                                return {
                                    id: i,
                                    name: e,
                                    url: fPaths[i],
                                }
                            })
                        } else {
                            filesList.value = []
                        }
                    }
                })
            })
        }

        const iframebaseRef = ref(null)
        const LookItemPic = (filePaths) => {
            nextTick(() => {
                iframebaseRef.value.LookItemPics(filePaths.selectedOptions[0].value, filePaths.selectedOptions[0].text);
            })
        };

        const LookItemPic2 = (filePaths) => {
            let fPaths = filePaths.url.replaceAll(appStore.baseUrl, "")
            nextTick(() => {
                iframebaseRef.value.LookItemPics(fPaths, filePaths.name);
            })
        };

        const rowInfo = ref({
            defend: ''
        })

        // 处理
        const defaultFileList = ref([])
        const handleChange = (options) => {
            // defaultFileList.value = options
        }
        const fPaths = ref('')
        const handleRemove = (options) => {
            fPaths.value = fPaths.value ? fPaths.value + "," + options.file.url : options.file.url
        }
        const onEditRemark = ref('')

        const handleShow = ref(false)
        const onEditchange = (row) => {
            rowInfo.value = row
            fPaths.value = ''
            flowList.value.forEach(e => {
                if (e.step == row.type) {
                    if (e.fNames && e.fPaths) {
                        let fNames = e.fNames.split(',')
                        let fPaths = e.fPaths.split(',')
                        defaultFileList.value = fNames.map((e, i) => {
                            return {
                                id: i,
                                file: {
                                    name: e,
                                    url: appStore.baseUrl + fPaths[i],
                                },
                                status: "",
                                objectUrl: appStore.baseUrl + fPaths[i],
                            }
                        })
                    } else {
                        defaultFileList.value = []
                    }
                    onEditRemark.value = e.notes
                }
            })
            handleShow.value = true
        }
        const onEditSubmit = (typeNum) => {
            if (defaultFileList.value.length < 1) {
                showFailToast('请先上传文件')
                return
            }
            let params = {
                xid: appStore.projectInfo.id,
                gdpid: bigListRow.value.id,
                flowid: rowInfo.value.flowid,
                type: typeNum,
                content: onEditRemark.value,
            }
            let fd = CreatedFormData(params)
            defaultFileList.value.forEach((e, i) => {
                if (e.content) {
                    fd.append('file' + (i + 1), e.file)
                }
            })
            if (typeNum == 0) {
                fd.append('finFpath', fPaths.value.replaceAll(appStore.baseUrl, ""))
            }
            if (typeNum == 3) {
                fd.append('bhstep', 0)
            }

            HandleGreatDangerProject(fd).then(async (res) => {
                if (res.code == 0) {
                    showSuccessToast(res.msg)
                    handleShow.value = false
                    // doRefresh()
                    let fd = CreatedFormData(
                        {
                            xid: appStore.projectInfo.id,
                            searchword: '',
                            page: 1,
                            limit: 999999,
                            nowuserid: 0
                        })
                    const res2 = await GetGreatDangerProjectList(fd);
                    if (res2.code == 0) {
                        bigListRow.value = res2.data.find((item) => item.id == route.query.id);
                        active.value = Number(bigListRow.value.flowStep) == 0 ? 10 : Number(bigListRow.value.flowStep - 1)
                        key.value++
                        GetGreatDangerProjectFlowLinkData(route.query.id);
                    }
                } else {
                    showFailToast(res.msg)
                }
            })
        }
        // 驳回
        const flowCheckShow = ref(false)
        const flowOptions = ref([
            {
                label: '方案编制',
                value: '1',
            },
            {
                label: '方案内部评审',
                value: '2'
            },
            {
                label: '方案专家评审',
                value: '3'
            },
            {
                label: '方案交底',
                value: '4'
            },
            {
                label: '方案交底接收',
                value: '5'
            },
            {
                label: '技术交底',
                value: '6'
            },
            {
                label: '技术交底验收',
                value: '7'
            },
            {
                label: '方案执行',
                value: '8'
            },
            {
                label: '方案实施监督',
                value: '9'
            },
            {
                label: '过程验收',
                value: '10'
            },
        ])
        const flowOptionsCopy = toRaw([...flowOptions.value])
        const onRejectFlow = () => {
            flowOptions.value = [...flowOptionsCopy]
            if (rowInfo.value.type == 9) {
                flowOptions.value.splice(-2);
            }
            if (rowInfo.value.type == 10) {
                flowOptions.value.splice(-1);
            }
            flowCheckShow.value = true
        }
        const flowSubmit = (item) => {
            if (item.selectedValues.length < 1) {
                showFailToast('请选择驳回节点')
                return
            }
            let params = CreatedFormData({
                xid: appStore.projectInfo.id,
                gdpid: bigListRow.value.id,
                flowid: rowInfo.value.flowid,
                type: 2,
                bhstep: Number(item.selectedValues[0]),
            })
            HandleGreatDangerProject(params).then(async (res) => {
                if (res.code == 0) {
                    init()
                    flowCheckShow.value = false
                    handleShow.value = false
                    showSuccessToast(res.msg)
                } else {
                    showFailToast(res.msg)
                }
            })
        }

        const key = ref(1)
        const init = async () => {
            let fd = CreatedFormData(
                {
                    xid: appStore.projectInfo.id,
                    searchword: '',
                    page: 1,
                    limit: 999999,
                    nowuserid: 0
                })
            const res = await GetGreatDangerProjectList(fd);
            if (res.code == 0) {
                bigListRow.value = res.data.find((item) => item.id == route.query.id);
                active.value = Number(bigListRow.value.flowStep) == 0 ? 10 : Number(bigListRow.value.flowStep - 1)
                key.value++
                GetGreatDangerProjectFlowLinkData(route.query.id);
            }
        }

        const goBack = () => {
            history.back()
        }
        onMounted(async () => {
            init()
        });


        return {
            key,
            active,
            dataList,
            filesList,
            fileListshow,
            iframebaseRef,
            LookItemFile,
            LookItemPic,
            bigListRow,
            handleShow,
            rowInfo,
            onEditRemark,
            onEditchange,
            defaultFileList,
            handleChange,
            handleRemove,
            onEditSubmit,
            flowCheckShow,
            flowOptions,
            onRejectFlow,
            flowSubmit,
            LookItemPic2,
            goBack
        };
    },
});
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
}

.titleHead {
    background: linear-gradient(180deg, rgba(1, 5, 21, 0.40) 0%, rgba(1, 5, 21, 0.60) 97.76%);
    color: #ffffff;
    text-align: center;
}

.stepsContent {
    margin-top: 20px;
    background-color: transparent;
}

.stepsItemContentDiv {
    background: linear-gradient(180deg, rgba(1, 5, 21, 0.40) 0%, rgba(1, 5, 21, 0.60) 97.76%);
    color: #ffffff;
    min-height: 120px;
    padding: 10px 24px;
    line-height: 50px;
    font-size: 22px;

    span {
        margin-left: 20px;
        font-size: 24px;
    }
}

.btn {
    background-color: transparent;
    border: none;
    color: #0089FF;
    padding: 0px;
    margin-bottom: 10px;
    font-size: 28px;
}

.titleBz {
    width: 120px;
    text-align: center;
    line-height: 40px;
    font-size: 28px;
}

.saveBtn {
    // margin: 40px 40px;
    height: 66px;
    border-radius: 6px;
    background: linear-gradient(180deg, #7FA9DB 0%, #93D3EF 97.76%);
    border: none;
}

.saveBtn2 {
    // margin: 40px 40px;
    height: 66px;
    border-radius: 6px;
    background: linear-gradient(180deg, #FF7D7D 0%, #EE5E5E 100%);
    border: none;
}

:deep(.stepsItem .van-step__line) {
    top: 0.85rem;
    height: calc(100% - 0.7rem);
}

:deep(.stepsItem2 .van-step__line) {
    background: #0089FF !important;
    top: 0.85rem;
    height: calc(100% - 0.7rem);
}

:deep(.van-step__title) {
    width: 75%;
    margin-left: 2rem;
}

:deep(.van-step__circle-container) {
    left: 0.6rem;
}

:deep(.van-step__line) {
    left: 1.49rem;
}

:deep(.van-hairline::after) {
    border: none;
}

// 弹窗处理
:deep(.handlePopup) {
    background-color: #111d37;
    color: #ffffff;
}

:deep(.van-field__label) {
    color: #ffffff;
}

:deep(.van-field__control) {
    color: #ffffff;
}

:deep(.van-uploader__file) {
    background-color: transparent;
    border: 1px dashed #fffffF;
    border-radius: 6px;
}

:deep(.van-uploader__file-name) {
    color: #ffffff;
}

:deep(.van-uploader__file-icon) {
    color: #ffffff;
}
</style>